<template>
    <div class="content-container">
        <Title :icon="'pie-chart-2-fill'" :title="'用户互动数据'">
            <template #time>
                <svg-icon size="14px" icon-class="refresh-line" class="mr-5px"></svg-icon>更新于今天
            </template>
        </Title>
        <div class="h-400px flex flex-center" id="userInteractionData">

        </div>
    </div>
</template>

<script setup lang="ts">
import Title from './Title.vue'
import * as echarts from 'echarts'

onMounted(() => {
    const chartDom = document.getElementById('userInteractionData');
    const myChart = echarts.init(chartDom);
    let option;

    option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: '进入私信',
                type: 'pie',
                radius: ['45%', '70%'],
                center: ['50%', '50%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                data: [
                    { value: 1048, name: '今日新增' },
                    { value: 735, name: '昨日新增' },
                    { value: 580, name: '累计' }
                ]
            }
        ]
    };

    option && myChart.setOption(option);

})
</script>

<style lang="scss">

</style>